<!-- 选择商标类别 -->
<template>
  <div class="select-trademark-type modal" :class="{ 'modal-mask': props.showModal }">
    <div class="select-trademark-content modal-content">
      <div class="title-wrap flx-justify-between" v-if="props.showModal">
        <div class="title">选择商标类别</div>
        <div class="close pointer" @click="cancel">
          <el-icon><Close /></el-icon>
        </div>
      </div>

      <div class="content">
        <div class="header flx-justify-between">
          <div class="p-title">商标分类</div>
          <el-radio-group v-model="filterType">
            <el-radio v-for="(item, index) in typeList" :key="index" :value="item.id" size="large">{{ item.name }}</el-radio>
          </el-radio-group>
        </div>

        <p class="p-text">{{ filterType == 1 ? "智能筛选" : "选择分类" }}</p>
        <div class="filter-wrap flx-justify-between">
          <div class="left filter-card" v-if="filterType == 1">
            <el-input
              class="textarea input-textarea"
              type="textarea"
              placeholder="请粘贴小类名称，多个以英文逗号分隔 “,”"
            ></el-input>
            <el-button class="filter-btn" type="primary" plain>筛选</el-button>
          </div>
          <div class="left filter-card" v-if="filterType == 2">
            <el-input placeholder="请选择或搜索商标分类"></el-input>
            <el-scrollbar style="height: 280px" class="mt-10">
              <el-tree style="max-width: 426px" :data="data" show-checkbox @check-change="handleCheckChange" />
            </el-scrollbar>
          </div>
          <div class="filter-card">
            <div class="right">
              <div class="desc flx-justify-between">
                <span class="text-color-6">已选小类明细</span>
                <el-button link class="pointer">清空</el-button>
              </div>
              <el-scrollbar :style="{ height: props.showModal ? '290px' : '200px' }">
                <div class="selected-list">
                  <div class="item" v-for="item in 10" :key="item">
                    <div class="title flx-justify-between">
                      <span class="text-color-6">30方便食品(2个)</span>
                      <el-icon size="16" color="#FF0000" class="pointer"><CircleClose /></el-icon>
                    </div>
                    <div class="sub-list">
                      <div class="sub-item flx-align-center">
                        <div class="label">3005(2个)</div>
                        <div class="tag-list">
                          <el-tag type="primary" v-for="item in 3" :key="item">300098蜂蜜</el-tag>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-scrollbar>
              <div class="flx-justify-end pt-10">
                <el-button>复制文本信息</el-button>
                <el-button type="primary">查看确认表</el-button>
              </div>
            </div>
            <!-- <el-empty description="暂未选择商标类别"></el-empty> -->

            <!-- 文本格式 -->
            <div class="text-format" v-if="!props.showModal">
              <div class="mt-12 text">文本格式</div>
              <div class="flx-justify-between">
                <div class="flx-justify-between w-100">
                  <el-radio-group v-model="formParams.textFormat">
                    <el-radio value="1">PDF</el-radio>
                    <el-radio value="2">Word</el-radio>
                    <el-radio value="2">PDF+Word</el-radio>
                  </el-radio-group>
                  <el-dropdown>
                    <el-button type="primary" plain>
                      生成委托书<el-icon class="el-icon--right"><arrow-down /></el-icon>
                    </el-button>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item>生成空白委托书</el-dropdown-item>
                        <el-dropdown-item>生成商标委托收</el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="footer-btn" v-if="props.showModal">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="sure">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineEmits, ref, defineProps } from "vue";

const props = defineProps({
  showModal: {
    type: Boolean,
    default: true
  }
});
const emit = defineEmits(["close", "change"]);

const formParams = ref({
  // 文本格式 1 PDF 2 Word 3 PDF+Word
  textFormat: 1
});

const typeList = ref([
  { id: 1, name: "智能筛选" },
  { id: 2, name: "手动选择" }
]);
// 筛选类型
const filterType = ref(1);

// 商标分类
const data = [
  {
    label: "Level one 1",
    children: [
      {
        label: "Level two 1-1",
        children: [
          {
            label: "Level three 1-1-1"
          }
        ]
      }
    ]
  },
  {
    label: "Level one 2",
    children: [
      {
        label: "Level two 2-1",
        children: [
          {
            label: "Level three 2-1-1"
          }
        ]
      },
      {
        label: "Level two 2-2",
        children: [
          {
            label: "Level three 2-2-1"
          }
        ]
      }
    ]
  },
  {
    label: "Level one 3",
    children: [
      {
        label: "Level two 3-1",
        children: [
          {
            label: "Level three 3-1-1"
          }
        ]
      },
      {
        label: "Level two 3-2",
        children: [
          {
            label: "Level three 3-2-1"
          }
        ]
      }
    ]
  },
  { label: "Level one 2" },
  { label: "Level one 2" },
  { label: "Level one 2" },
  { label: "Level one 2" },
  { label: "Level one 2" },
  { label: "Level one 2" },
  { label: "Level one 2" },
  { label: "Level one 2" }
];
// 取消
const cancel = () => {
  emit("close");
};

// 确定
const sure = () => {
  emit("change");
};
</script>

<style lang="scss" scoped>
.select-trademark-type {
  .select-trademark-content {
    width: 1000px;
    max-width: 100%;
    height: auto;

    .content {
      background: #f5f7fa;
      border-radius: 4px;
      padding: 12px;
      height: 420px;
      margin-top: 12px;
      display: flex;
      flex-direction: column;

      .header {
        height: 35px;
      }

      .p-text {
        line-height: 20px;
        padding: 14px 0 4px 0;
        margin: 0;
      }

      .filter-wrap {
        flex: 1;

        .filter-card {
          width: calc(50% - 10px);
          height: 100%;
          display: flex;
          flex-direction: column;
          box-sizing: border-box;

          &.left,
          .right {
            padding: 8px 12px;
            background: #fff;
            border: 1px solid #e4e7ed;
            border-radius: 4px;
          }
          .right {
            flex: 1;
          }

          .textarea,
          :deep(textarea) {
            flex: 1;
            height: 100%;
            outline: none;
            box-shadow: none;
          }

          .filter-btn {
            width: 60px;
            display: inline-block;
            margin-top: 8px;
          }

          &.right {
            padding: 8px 0 12px 8px;

            .desc {
              height: 32px;
              padding-right: 12px;

              .pointer {
                color: #c0c4cc;
              }
            }
          }

          :deep(.el-tree-node__content) {
            padding-bottom: 10px;
          }

          .selected-list {
            .item {
              font-size: 12px;
              color: #606266;
              padding-bottom: 10px;
              padding-right: 12px;

              .title {
                height: 22px;
              }
            }

            .sub-list {
              padding-top: 2px;
              .sub-item {
                padding-bottom: 4px;

                .label {
                  width: 60px;
                }

                .tag-list {
                  flex: 1;

                  .el-tag {
                    margin-left: 8px;
                  }
                }
              }
            }
          }
        }
      }
    }

    .footer-btn {
      padding-top: 20px;
      text-align: right;
    }
  }

  .text-format {
    .text {
      padding-bottom: 4px;
    }
  }
}
</style>
